Browser Displays Page Without Styles for a Short Moment (Visual Glitch)

Browser displays page without styles for a short moment (visual glitch)

This is called a FOUC, a Flash Of Unstyled Content, and is well documented and explained here: http://www.bluerobot.com/web/css/fouc.asp/

Bug with browsers' interpretation of @media queries

It's difficult to give a specific answer without seeing what you are seeing, but it's possible that the browsers are handling the transition from one media query to the next in different ways discussed below.

Most Likely Cause: Windows Display Settings

I assume you are using Windows when you mention Edge, I suspect this might be because you have changed the scale of your display in Windows - Display Settings. If this is set to 125% for example, this can have an affect on all aspects of your display.

So really this isn't a bug with the media queries, so much as a discrepancy caused by the browsers not effectively handling the scaling by Windows Display settings.

---

UPDATE - Now that you have confirmed that you can stop on a particular point where this happens, then I'm pretty confident this is the cause. In my testing yesterday when looking into this, I was able to reproduce that behaviour when the display was scaled.

Using the following test case with original styling of an empty block with a red border, and different CSS applied at (max-width: 1119px) and (min-width: 1120px), the issue happens only when the display is scaled.

body{ margin:50px 0 0 0;}

.test {
  border: 10px solid #f00;
  height: 10px;
}

@media (min-width: 1120px) {
  .test {
    background: #ff0;
    height: 500px
  }
}

@media (min-width: 720px) and (max-width: 1119px) {
  .test {
    margin-left: 300px;
    background: #0FF;
    height: 200px
  }
}

@media (min-width: 460px) and (max-width: 719px) {
  .test {
    margin-left: 300px;
    background: #00f;
    height: 200px
  }
}

@media (max-width: 460px) {
  .test {
    background: #ff0;
    height: 100px
  }
}

<div class="test"></div>

Page has a weird font glitch on refresh

a quick search made me find this article: https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d

you should download your fonts and host them yourself so it renders faster. having google host it for you only makes it slower to load (could be many factors why it takes long to load, maybe its your internet, maybe because there is a lot of text on the page, maybe both.) which causes you to see the regular font for a couple seconds.

Faster way to develop and test print stylesheets (avoid print preview every time)?

You can use the Chrome Media Type Emulation as accepted in the post See print css in the browser.

UPDATE 21/11/2017

The updated DevTools doc can be found here: View a page in print mode.

To view a page in print mode:

1. Open the Command Menu. (tl;dr Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux))

2. Start typing Rendering and select Show Rendering.

3. For the Emulate CSS Media dropdown, select print.

---

UPDATE 29/02/2016

The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.

Open the DevTools emulation drawer by clicking the More overrides ••• more overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

UPDATE 12/04/2016

Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):

1. Open Chrome DevTools
2. Hit esc on your keyboard
3. Click ⋮ (vertical ellipsis)
4. Choose Rendering
5. Tick Emulate print media

See screenshot below:

UPDATE 28/06/2016

Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.

UPDATE 24/05/2016

The naming of settings have changed once again:

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering, and then enable the Emulate CSS Media checkbox with the dropdown menu set to print.

Background image jumps when address bar hides iOS/Android/Mobile Chrome

This issue is caused by the URL bars shrinking/sliding out of the way and changing the size of the #bg1 and #bg2 divs since they are 100% height and "fixed". Since the background image is set to "cover" it will adjust the image size/position as the containing area is larger.

Based on the responsive nature of the site, the background must scale. I entertain two possible solutions:

1) Set the #bg1, #bg2 height to 100vh. In theory, this an elegant solution. However, iOS has a vh bug (http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/). I attempted using a max-height to prevent the issue, but it remained.

2) The viewport size, when determined by Javascript, is not affected by the URL bar. Therefore, Javascript can be used to set a static height on the #bg1 and #bg2 based on the viewport size. This is not the best solution as it isn't pure CSS and there is a slight image jump on page load. However, it is the only viable solution I see considering iOS's "vh" bugs (which do not appear to be fixed in iOS 7).

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

On a side note, I've seen so many issues with these resizing URL bars in iOS and Android. I understand the purpose, but they really need to think through the strange functionality and havoc they bring to websites. The latest change, is you can no longer "hide" the URL bar on page load on iOS or Chrome using scroll tricks.

EDIT: While the above script works perfectly for keeping the background from resizing, it causes a noticeable gap when users scroll down. This is because it is keeping the background sized to 100% of the screen height minus the URL bar. If we add 60px to the height, as swiss suggests, this problem goes away. It does mean we don't get to see the bottom 60px of the background image when the URL bar is present, but it prevents users from ever seeing a gap.

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

---

Related Topics