css - CSS3 Transform causing text to flicker in Safari and Firefox Mac Yosemite -


i'm having weird issue on safari , firefox (mac/yosemite) causes of text on page flicker when hovering on transforming element.

example gif: (firefox, yosemite)

enter image description here

.usp {    //usp has icon defined below     opacity: .4;     @include transition(all .3s ease-in-out);       &:hover {          opacity: 1;         @include transition(all .3s ease-in-out);           .icon {             @include transform(scale(1.1));             @include transition(all 1.7s ease-in-out);         }     } // :hover }   .usp .icon {     display: block;     height: 75px;     width: 75px;     // insert background-image sprite (removed example)     @include transition(all .3s ease-in-out);      @include transform(scale(1.0)); }

i've tried following things:

add every possible combination of these styles body, transforming element and/or parent

-webkit-transform-style:preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;  backface-visibility: hidden; -webkit-filter: opacity(.9999); -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0); -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke: 0.35px;

if (styles below) applied body, problem fixed in safari not in firefox not webkit browser.

-webkit-transform: translate3d(0, 0, 0); -webkit-text-stroke: 0.35px;

i have literally no idea causes , how can fix it!

alright!

after week of testing, removing , adding css rules found solution fixed problem. had problem in both firefox 39 , safari 9 firefox mysteriously fixed latest update. safari however, did not. problem has 3d rendering of elements on page. element tried scale had transformed 3d context, flickering elements on page switched between 2d , 3d explained @woodrow-barlow in other answers.

by adding

-webkit-transform: translate3d(0, 0, 0);

to flickering elements, , rendering them in 3d on page load, no longer had switch!

edit 1: people have issue in other browsers, take @ css 'will-change' property: https://dev.opera.com/articles/css-will-change-property/


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more