Closed Bug 722548 Opened 8 years ago Closed 8 years ago

Large play button for HTML5 <video> controls is not centered vertically

Categories

(Toolkit :: Video/Audio Controls, defect)

12 Branch
defect
Not set

Tracking

()

RESOLVED FIXED
mozilla13

People

(Reporter: cpearce, Assigned: jaws)

References

()

Details

Attachments

(3 files, 1 obsolete file)

Attached image Screenshot of problem
See attached screenshot (taken from http://pearce.org.nz/full-screen/ ). The large play button added in bug 666306 isn't quite centred. This is most noticeable on small media.

For example, see screenshot. If you zoom in you can see that there's 4 pixels beneath the play button, but 2 above it.
Attached patch Patch for bug 722548 (obsolete) — Splinter Review
Chris: Can you apply this patch and let me know if it looks better?
Assignee: nobody → jwein
Status: NEW → ASSIGNED
Attachment #593620 - Flags: feedback?(cpearce)
OS: Windows 7 → All
Hardware: x86_64 → All
Summary: Large play button is not centred → Large play button for HTML5 <video> controls is not centered vertically
Comment on attachment 593620 [details] [diff] [review]
Patch for bug 722548

Perfect.
Attachment #593620 - Flags: feedback?(cpearce) → feedback+
Attachment #593620 - Flags: review?(dao)
Comment on attachment 593620 [details] [diff] [review]
Patch for bug 722548

>   background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
>                     url(chrome://global/skin/media/videoClickToPlayButton.svg);
>   background-repeat: repeat, no-repeat;
>-  background-position: center, center;
>+  background-position: center, center -moz-calc(50% + 1px);

Why "+ 1px"? Is videoClickToPlayButton.svg itself misaligned?
(In reply to Dão Gottwald [:dao] from comment #3)
> Comment on attachment 593620 [details] [diff] [review]
> Patch for bug 722548
> 
> >   background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
> >                     url(chrome://global/skin/media/videoClickToPlayButton.svg);
> >   background-repeat: repeat, no-repeat;
> >-  background-position: center, center;
> >+  background-position: center, center -moz-calc(50% + 1px);
> 
> Why "+ 1px"? Is videoClickToPlayButton.svg itself misaligned?

Yeah, that's what it appears like.
> > Why "+ 1px"? Is videoClickToPlayButton.svg itself misaligned?
> 
> Yeah, that's what it appears like.

Can this be fixed?
(In reply to Dão Gottwald [:dao] from comment #5)
> > > Why "+ 1px"? Is videoClickToPlayButton.svg itself misaligned?
> > 
> > Yeah, that's what it appears like.
> 
> Can this be fixed?

Moved down 1px
Comment on attachment 593620 [details] [diff] [review]
Patch for bug 722548

(In reply to Stephen Horlander from comment #6)
> Created attachment 593951 [details]
> videoClickToPlayButton.svg moved down 1px
> 
> (In reply to Dão Gottwald [:dao] from comment #5)
> > > > Why "+ 1px"? Is videoClickToPlayButton.svg itself misaligned?
> > > 
> > > Yeah, that's what it appears like.
> > 
> > Can this be fixed?
> 
> Moved down 1px

Thanks!
Attachment #593620 - Flags: review?(dao)
Attached patch Patch for bugSplinter Review
I used shorlander's new graphic and it looks good to me. Just swapping the two files here for winstripe and pinstripe.
Attachment #593620 - Attachment is obsolete: true
Attachment #594124 - Flags: review?(dao)
Attachment #594124 - Flags: review?(dao) → review+
https://hg.mozilla.org/mozilla-central/rev/b43e5ed78946
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → mozilla13
You need to log in before you can comment on or make changes to this bug.