Page MenuHomePhabricator

Syntax highlighting in wikitext editor interacts badly with the responsive design mode of Firefox
Open, LowPublic

Description

The 2017 wikitext editor becomes almost completely unusable for editing when combined with the responsive design mode of Firefox. This happens only when Syntax highlighting is turned on.

Steps to reproduce

  1. Go to User:NMorales (WMF)/Sandbox/IdeaLabHomeMobile
  2. Edit it as source using the 2017 wikitext editor using Firefox that has the "Responsive design mode" feature
  3. Do some changes
  4. Preview the changes
  5. Switch to the responsive design mode (Ctrl+Shift+M) without exiting the preview
  6. Exit the mode (Ctrl+Shift+M) without exiting the preview
  7. Exit the preview
  8. Try to do some editing.

Actual behaviour

The editor doesn't behave as it should (deleting content using backspace doesn't delete the content though the cursor moves, issue of T181816 seems to be re-surfacing, etc. etc.)

Expected behaviour

The editor should behave as it usually does.

Environment details

BrowserFirefox Nightly 62.0a1
OSDebian GNU/Linux 9 (stretch)
SkinVector (default)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Works fine for me using Firefox 61.0b14 on Windows 10.

Works fine for me using Firefox 61.0b14 on Windows 10.

Interesting. I tested this just now on a Firefox 60.0.2 on Windows 10. I could reproduce this consistently. To add to that I could reproduce the issue with the following smaller set of steps.

  1. Go to User:NMorales (WMF)/Sandbox/IdeaLabHomeMobile
  2. Edit it as source using the 2017 wikitext editor using Firefox that has the "Responsive design mode" feature
  3. Do some changes
  4. Switch to the responsive design mode (Ctrl+Shift+M)
  5. Exit the mode (Ctrl+Shift+M)
  6. Try to do some editing.

Additional note: This happens even in safemode.

OK. I think I tracked down the real culprit. It seems to be Syntax highlighting that is causing the issues. I don't face any issues with visual editor when I turn-off Syntax highlighting. I'll update the task correspondingly.

BTW, @matmarex did it work fine with or without syntax highlighting for you?

Kaartic renamed this task from 2017 wikitext editor interacts badly with the responsive design mode of Firefox to Syntax highlighting for 2017 wikitext editor interacts badly with the responsive design mode of Firefox.Jun 25 2018, 6:41 PM
Vvjjkkii renamed this task from Syntax highlighting for 2017 wikitext editor interacts badly with the responsive design mode of Firefox to weaaaaaaaa.Jul 1 2018, 1:02 AM
Vvjjkkii raised the priority of this task from Low to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
Kaartic renamed this task from weaaaaaaaa to Syntax highlighting for 2017 wikitext editor interacts badly with the responsive design mode of Firefox.Jul 1 2018, 3:58 PM
Kaartic lowered the priority of this task from High to Low.
Kaartic updated the task description. (Show Details)
Kaartic added a subscriber: Aklapper.

This also hits syntax-highlighted editing in 2010 WTE on the desktop domain on Firefox Daylight (Firefox 81.1 for mobile) with a version of Android I shouldn't still be running (4 year old phone) but which isn't the issue given the existence of this task.

(I use Timeless, which is why that sentence is the way it is.)

Izno renamed this task from Syntax highlighting for 2017 wikitext editor interacts badly with the responsive design mode of Firefox to Syntax highlighting in wikitext editor interacts badly with the responsive design mode of Firefox.Sep 30 2020, 7:18 PM

Adding this CSS appears to be a partial fix (at least on my mobile device running Firefox Daylight (Android) 92.1.1:

.mw-editfont-monospace {  
    -webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none;  
    text-size-adjust: none;  
}

This mostly fixes the issue with the cursor not aligning with text at all, but it still breaks if you fully delete a line.

@Eviolite that makes sense. we should probably apply that to all edit surfaces, because the OS randomly modifying our font sizes seems a tad dangerous esp. for syntax highlight.