scottjehl/Respond

Boostrap loaded from external IE8

Opened this issue · 3 comments

cassianotartari commented

Hello everybody!

I'm here breaking my mind reading a lot on web and I would like to understand why this is happening with me. In a project with Symfony (php framework) I have:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>...</title>
        <link rel="stylesheet" href="{{ asset('bundles/mysite/css/bootstrap/css/bootstrap.min.css') }}" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="{{ asset('bundles/mysite/js/html5shiv.min.js') }}"></script>
            <script src="{{ asset('bundles/mysite/js/respond.min.js') }}"></script>
        <![endif]-->
    </head>
<body>
</body>
</html>

Basic the twig function asset in the code above does is generate the path to the file. In dev environment the path is the local server. Running under prod it adds a url to my Amazon S3 before the path. So in dev I have for example the path /bundles/mysite/css/bootstrap/css/bootstrap.min.css and in prod I have http://assets.mysite.com.br/bundles/mysite/css/custom.css.

The problem is with my responsive layout with IE8, in body I have a div like:

<div class="col-xs-12 col-sm-5">

So, running in dev it renders perfectly (col-sm-5 assumes control). Running with prod = with http://assets.mysite.com.br before css url only col-xs-12 works.

Anybody knows why this difference when bootstrap is loaded with a absolute url and without it?

Another personal issue is with icons render in IE8. I was reading #9962 and #13657 and http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ but need to study more before starts another issue.

jakekreider commented

If col-xs-12 is what's applying then it sounds like the media queries aren't being parsed at all. Based on your scenario it sounds like you have the cross-domain issue mentioned in the README -- The script is unable to read your CSS files due to cross domain restrictions. Have you tried adding the proxy HTML, JS & GIF as outlined in the doc? The HTML file needs to be served from your CDN/S3 repo and the JS & GIF need to be from the domain serving the base page (invoking the respond.js script).

ruslan-fidesio commented

@cassianotartari Hello, have you found a solution to this problem ? I have the same issue in a Symfony production environment.

cassianotartari commented

@ruslan-fidesio I can't remember what I did... I don't know if I solved the issue or simply abandoned the IE8. Probably this problem was addressed to this webpage.