Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#25600 closed defect (bug) (fixed)

Twenty Fourteen scroll is noticable slow/jumpy/lagging on Firefox

Reported by: ipstenu's profile Ipstenu Owned by:
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

Originally posted on the WP Forums - http://wordpress.org/support/topic/firefox-lags-when-scrolling-twentyfourteen?replies=1

I can reproduce this on OS X/Firefox 24

Attachments (3)

25600.diff (3.5 KB) - added by iamtakashi 11 years ago.
pattern-light.svg (588 bytes) - added by iamtakashi 11 years ago.
pattern-dark.svg (558 bytes) - added by iamtakashi 11 years ago.

Download all attachments as: .zip

Change History (11)

#1 @iamtakashi
11 years ago

This seems to be caused by the css background image pattern for the placeholder. Can anybody help to replicate it in a less cpu intensive way?

#2 @lancewillett
11 years ago

  • Milestone changed from Awaiting Review to 3.8
  • Summary changed from TwentyFourteen scroll is noticable slow/jumpy/lagging on Firefox to Twenty Fourteen scroll is noticable slow/jumpy/lagging on Firefox

@iamtakashi
11 years ago

#3 @iamtakashi
11 years ago

Attached a patch with two svgs to replicate the pattern. In this way, we can reduce significantly CPU usage and they are scalable and crisp on hdpi/retina screens. Also svg are supported in IE9 which doesn't support CSS gradients.

#4 @lancewillett
11 years ago

  • Keywords has-patch needs-testing added

Nice solution, Takashi. ;)

#5 @lancewillett
11 years ago

In 25865:

Twenty Fourteen: use SVG images instead of CSS3 gradients for featured image background pattern. Props iamtakashi.

  • Fixes laggy loading in Firefox, see #25600.
  • Significantly reduces CPU usage.
  • Scalable and crisp on HiDPI/retina screens.
  • SVG is support in IE9 which doesn't support CSS gradients.

#6 @lancewillett
11 years ago

  • Resolution set to fixed
  • Status changed from new to closed

#7 @lancewillett
11 years ago

  • Keywords has-patch needs-testing removed

#8 @RDall
11 years ago

For what it is worth and this may just be my opinion but the closer smaller lines of that are now in Twenty Fourteen still blur when you actually move the page.

This effect also appears on the left hand side menu page text and the entry meta below the header of the page.

You can see it in the screencast I took here (labeled in error twenty-thireen-bug) in http://f.cl.ly/items/2Z3P1T2Y1S2k1q210h3m/Twenty-Thirteen-bug.mov

A screen capture or an image could cause this as it is subject to your eye which causes the bluring technique I am showcasing in the above video. This is also why you don't see patterns like this on most Television programs as the broadcast equipment and your eye gets confused by the actually effect of the lines moving across the screen.

The only way to solve this issue is to increase the distance between the lines and then you eye doesn't confuse what is a line and what isn't.

How many people:

  • Are going to move the web page and see the effect? Not sure
  • How many people will not be bother by this? Also unsure… 

It just doesn't look right to me and I would avoid releasing the theme with this in place. But again this is just my opinion and observations.


Last edited 11 years ago by RDall (previous) (diff)
Note: See TracTickets for help on using tickets.