Cristian Fogel [:cfogel] Reporter
	Description • 6 years ago

[Affected versions]:
- Firefox  52.8.1 ESR, 60.0.2ESR, 60.0.1, 62.0a1 (2018-06-06) 

[Affected platforms]:
- Windows 10x64, Ubuntu 16.04LTS, MacOS 10.11

[Steps to reproduce]:
1. Launch Firefox;
2. Navigate to https://www.bbc.com/news/video_and_audio/headlines
3. Click on any video;
4. Press tab a couple of times;
5. Grab the left/right navigator arrows from the Top Video section and drag down

[Expected result]:
- The highlight/dashed line is marking the selected item.

[Actual result]:
- The dashed line extends all the way to the left edge of the container
 
[Additional notes]:
- attached screenshot with the issue;
- on Ubuntu, there is no need for step 4;
- on MacOS step 4 needs to be repeated a couple of times;

	Xidorn Quan [:xidorn] UTC+11
	Comment 1 • 6 years ago

So this is because the line contains a <span>Previous</span> with "text-indent: -1000em;" and we render the outline around that element.

I don't know what other browsers do. Maybe they don't take out-of-view content into consider when drawing outline? That may make sense, I guess.

	Xidorn Quan [:xidorn] UTC+11
	Comment 2 • 6 years ago

This is a simplified testcase.

The second block should be exactly the same case as BBC, while the first block is a further simplification which may be a related but different issue.

	Xidorn Quan [:xidorn] UTC+11
	Comment 3 • 6 years ago

OK, so it seems Blink doesn't count text into outline at all in this case, which is probably wrong spec-wise I guess...