Menu
I have a Chrome-only problem with my Bootstrap (v3.3.5) layout css at exactly 767px where the layout styles simply aren't being applied.
Here's the behaviour after experimenting with the console on 3 browsers...
Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout
Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout
Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)
All my media queries have been created as follows...
@media (max-width: 767px) {
/*small view*/
}
@media (min-width: 768px) {
/*full view*/
}
I've experimented changing these values so there's an overlap (e.g. a min-width of 767px) but it has no effect.
Apologies if this is a little vague, but I don't really know where to go from here in investigating the problem and have found only one report of similar behaviour from a previous version of bootstrap (https://github.com/twbs/bootstrap/issues/1531).
Does anyone know of any possible reason that I'd be seeing this on Chrome only? Either way, any advice on an appropriate way to investigate would be very much appreciated.
-- EDIT -- After hours of research I tested this simple file...
<html>
<head>
<style>
@media (max-width: 767px) {
.headlineText {
font-size: 10px;
color: red;
}
}
@media (min-width: 768px) {
.headlineText {
font-size: 10px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="headlineText">this is a headline</h1>
</body>
</html>
On Chrome only - at 767px the text is neither green or red - it's black, Times New Roman, and considerably bigger than 10px. Of course I can't replicate this by uploading to a fiddle/codepen - so it must be something to do with the fact I'm running on a localhost (via MAMP). Absolutely zero ideas why that would be the case, but at least it doesn't seem to be something that will affect me in a live environment
606
Chrome (for me version 89.0.4389.82 on Win10) seems to work with fraction of pixels. Hence, increasing all lower breakpoint thresholds by .9px solved the issue for me. So for example
max-width :767px needs to become max-width :767.9px
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
