search

Esri / calcite-web

Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties.
http://esri.github.io/calcite-web/
Apache License 2.0
109 stars 58 forks source link

Page content flickers during nav mouse over in Safari v8.0.7 #344

Closed lheberlie closed 9 years ago

lheberlie commented 9 years ago

When using Safari (Version 8.0.7 (10600.7.12)), mouse over the side nav items and the page content flickers.

http://esri.github.io/calcite-web/page-layouts/api-reference/

voila_capture 2015-09-01_01-56-28_pm

paulcpederson commented 9 years ago

This has something to do with the :after element animating on the side nav. Really bizarre.

nikolaswise commented 9 years ago

Im seeing this in Chrome - but super subtle. Maybe not it's so subtle I could be imagining it.

This does also cause flickr on buttons here tho http://esri.github.io/calcite-web/components/

nikolaswise commented 9 years ago 
body {
  -webkit-transform: translate3d(0, 0, 0);
}

Stops the flicker, but makes all the type look like the lighter version in the flicker all the time.

Simple solution would be to remove the -webkit transform3d polyfill to just fade in and out on safari. Not sure at the moment how Safari's 3d rendering is affecting type.

nikolaswise commented 9 years ago

Addressed in #353