webcompat / browser-compat-bugs

Repository for Web Developers to report bugs with interop bugs in browsers

This project is no longer active!

This project is no longer active, and this repo is read-only. Please report any Browser Compatibility bugs you find via webcompat.com.

For reference, the old README contents are kept below.

---

Browser Compat Bugs

Repository for web developers to report browser compatibility issues.

The goal is to help web developers to report issues with a test case illustrating the issue at hand, so that browser implementers can have a look at it.

Example Issue

To get an idea of what kind of issues to report, here is an example:

• CSS multi-column and SVG renders differently in Chrome compared to Safari and Firefox

Browser Compat Bugs vs webcompat.com

The site webcompat.com collects issues reported by users when they have the feeling the website is broken in one browser but not another. The bugs are collected into web-bugs.

This repo is here to collect specific test cases illustrating the difference between two or more browsers. The bar for contributing an issue is higher.

Future

Eventually this repo could be hooked into browser DevTools to automatically submit a reduced test case. We are not there yet. Let's start simple.

browser-compat-bugs's Issues

CSS multi-column and SVG renders differently in Chrome compared to Safari and Firefox

Describe the issue
Using multiple SVG images without specified dimensions in CSS multicol (columns: 2) renders differently in Chrome compared to Safari and Firefox. Chrome renders the images in one column, Safari and Firefox side by side in 2 columns.

Technologies Involved
CSS multi-column, SVG

Browsers Tested

• Chrome 93.0.4577.82 (Official Build) (x86_64) on macOS 11.4
• Safari Version 14.1.1 (16611.2.7.1.4) on macOS 11.4
• Firefox Nightly 94.0a1 (2021-09-23) (64-bit)

Testcase
https://codepen.io/zcorpan/pen/dyRLYLa

Screenshots
Chrome:

Safari:

Firefox:

Additional context
Add any other context about the problem here.

What can I expect to happen after I file an issue?

The readme could say something about that to motivate the effort of filing an issue.

Using Modern Issues Template.

@denschub suggested we use https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository#creating-issue-forms

Styling :placeholder-shown does not work interoperably

Describe the issue
Trying to use :placeholder-shown to truncate placeholder text mostly works for input elements (though only Firefox shows a color change). Using it on a textarea does not work at all for truncation, and browsers disagree on which rules they apply.

Technologies Involved
CSS Selectors https://drafts.csswg.org/selectors/#placeholder

Browsers Tested
Mac Firefox, Edge, Safari

Testcase
https://codepen.io/astearns/pen/OJgGmNz

Screenshots
Mac Firefox 92, input element on top, textarea element below

Here white-space:nowrap does not apply. Since that does not, it can’t be determined whether text-overflow:ellipsis would have an effect

Mac Edge 94, input element on top, textarea element below

Here white-space: nowrap does apply, but color and text-overflow: ellipsis do not

(Chrome and Safari are similar to Edge)

Additional context
w3c/csswg-drafts#6669
https://bugzilla.mozilla.org/show_bug.cgi?id=1732267

Branding of this repo

If we're going to tweet about this repo and ask web developers to file issues, what do we call it? "webdev" doesn't capture that it's about browser compatibility/interoperability issues.

My best suggestion would be "browsercompat" or "browser-compat" which would work as hashtags and as a repo name if we want to rename it.

@jgraham @karlcow WDYT?