WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 3 weeks ago

#45876 reopened defect (bug)

Twenty Nineteen: Dropcap appears higher than expected in Firefox

Reported by: kjellr Owned by: ianbelanger
Milestone: 5.4.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-screenshots has-patch fixed-major
Focuses: css Cc:

Description

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

https://cldup.com/yGg0iA2a7b.thumb.jpg

@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.

https://cldup.com/gmQzbBPGcP-3000x3000.png

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:

https://github.com/WordPress/twentynineteen/issues/749

Attachments (4)

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

Download all attachments as: .zip

Change History (17)

#1 @joseph.dickson
18 months ago

@kjellr Thanks for migrating this request.

#2 @laurelfulford
18 months ago

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

#3 @ianbelanger
4 months ago

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

@maxpertici
4 months ago

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

#4 @maxpertici
4 months 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 months 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.

@maxpertici
4 months ago

Same patch without package.json modification

#6 @maxpertici
4 months ago

Hi @ianbelanger,

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

#7 @ianbelanger
4 months ago

  • Keywords needs-refresh removed

No problem, thanks for updating your patch.

#8 @samful
6 weeks 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 :)

@ianbelanger
3 weeks ago

Updated patch that uses proper selectors

#9 @ianbelanger
3 weeks 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
3 weeks 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
3 weeks ago

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

Reviewing for commit.

#12 @ianbelanger
3 weeks 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
3 weeks 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.

Note: See TracTickets for help on using tickets.