Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#45876 closed defect (bug) (fixed)

Twenty Nineteen: Dropcap appears higher than expected in Firefox

Reported by: kjellr's profile kjellr Owned by: ianbelanger's profile ianbelanger
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: css Cc:


As noted by @josephdickson, Firefox renders the dropcap text roughly 0.2em higher than in Chromium:

@josephdickson proposed a possible solution:

With a little help from @electmikemann ( via Twitter) I found a solution that I'd like to propose for a future update.

The @-moz prefix targets Firefox and is ignored by other browsers. I've tested it via the Customizer's Additional CSS box. Anyone can do the same for a quick fix.

@-moz-document url-prefix() {
	.entry .entry-content .has-drop-cap:not(:focus)::first-letter {
  	margin-top: 0.2em;


This issue was migrated over from Twenty Nineteen's GitHub repository:

Attachments (4)

45876.1.diff (35.7 KB) - added by maxpertici 4 years ago.
Diff fix with hack @ -moz-document url-prefix ()
45876.2.diff (35.4 KB) - added by maxpertici 4 years ago.
Same patch without package.json modification
45876.3.diff (1.7 KB) - added by ianbelanger 4 years ago.
Updated patch that uses proper selectors
45876-3-linux-firefox.png (78.0 KB) - added by samful 4 years ago.

Download all attachments as: .zip

Change History (18)

#1 @joseph.dickson
5 years ago

@kjellr Thanks for migrating this request.

#2 @laurelfulford
5 years ago

  • Keywords has-screenshots added; needs-testing removed
  • Milestone changed from Awaiting Review to Future Release

#3 @ianbelanger
4 years ago

  • Focuses css added
  • Milestone changed from Future Release to 5.5
  • Version changed from 5.0.2 to 5.0

4 years ago

Diff fix with hack @ -moz-document url-prefix ()

#4 @maxpertici
4 years ago

I propose this patch on the basis of the hack proposed on this ticket. This refers to the scss style-editor and _blocks files and the generated css files.

#5 @ianbelanger
4 years ago

  • Keywords has-patch needs-refresh added; needs-patch removed

Hi @maxpertici,

Thanks for your patch. It does seem to fix the issue in Firefox, but I noticed that there is a change to the package.json file in your diff. Please remove this change and resubmit the patch.

4 years ago

Same patch without package.json modification

#6 @maxpertici
4 years ago

Hi @ianbelanger,

I hope this one will be better.
Sorry for the setback. Obviously a change on the grunt config.

#7 @ianbelanger
4 years ago

  • Keywords needs-refresh removed

No problem, thanks for updating your patch.

#8 @samful
4 years ago

I tested this issue on the latest Linux (Fedora) Firefox and Chromium and this fix works well. I hope a commit can be made soon :)

4 years ago

Updated patch that uses proper selectors

#9 @ianbelanger
4 years ago

  • Keywords needs-testing added

The last patch no longer worked for me, it would not apply anymore. So I have updated the patch. @samful would you mind testing it out. Works good for me in chrome and firefox. Thanks

#10 @samful
4 years ago

That patch is much tidier @ianbelanger. It all seems to work for me, I'll add a screen-shot below of before and after:

#11 @ianbelanger
4 years ago

  • Keywords commit added; needs-testing removed
  • Owner set to ianbelanger
  • Status changed from new to reviewing

Reviewing for commit.

#12 @ianbelanger
4 years ago

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

In 48047:

Bundled Themes: Twenty Nineteen dropcap appears higher than expected in Firefox.

Fixes the issue by adding moz specific top margin for the dropcap.

Props kjellr, joseph.dickson, maxpertici, samful.
Fixes #45876.

#13 @ianbelanger
4 years ago

  • Keywords fixed-major added; commit removed
  • Milestone changed from 5.5 to 5.4.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#14 @desrosj
4 years ago

  • Keywords fixed-major removed
  • Milestone changed from 5.4.3 to 5.5
  • Resolution set to fixed
  • Status changed from reopened to closed

With 5.5 just under 5 weeks away, there is no 5.4.3 planned. Moving back to the 5.5 milestone.

Note: See TracTickets for help on using tickets.