Look at my Survey Form project, strange problem in Chrome vs Firefox

Code Feedback
1

Hey yall :raising_hand_man:t6:
Just finished my Survey Form project. Check it out!
https://codepen.io/kwxza/full/orKmBB

There’s something strange happening depending on if you view it in Chrome vs Firefox.
It seems like the position: relative property behaves differently in each browser, so in Firefox I’m getting my <textarea> input pushed to the right side as so:

image
image1920×1080 155 KB

Look at the same section in the Chrome browser:

image
image1920×1080 208 KB

And if I comment out the position and left CSS styles while in Firefox, it fixes the offset!?

image
image1920×1080 155 KB

But in Chrome, removing those styles pushes the <textarea> to the left side instead :sob:

image
image1920×1080 194 KB

I’ve left the CSS as what looks best for Chrome, since more people use that browser.
But what in the blazes is going on here?

I know there’s vendor-specific prefixes for certain CSS properties, but I think I avoided using anything that required different prefixes.
Do Flexbox and/or CSS Grid behave differently depending on which browser you are using?

I would really appreciate any ideas or knowledge anybody might have.
Thanks for looking at the page!

1 Like
2

Vendor specific stylesheets which differ. Vendor prefixes are for experimental or partial implementation. So without actually evaluating your code and assuming you HTML was validated by a validator so that it’s error free, checkout caniuse.com to see if you need a vendor prefix. Also, see if a reset stylesheet or normalize.css helps. These are found by clicking the gear icon in the CSS panel. Try them both and see what happens.

@kwxza I turned on Autoprefixer, no change.

#survey-form {
	box-shadow: 20px, 19px, #000;
...
grid-template-columns: repeat(5 1fr);

commas in the wrong places

#identity span {
	align-self: right;

no right in align-self

Can’t figure out the text area other than why are you mixing grid and flexbox? It’d be easier to use one or the other or neither. It seems to me that the two lines of text should be in the same container as textarea as a center aligned column but they have different parents.

1 Like
3

@tlc35us
Unfortunately normalizing and resetting my CSS on CodePen had no effect.

I’m not sure if I really understand how to use caniuse.com.
I looked up the position property and it looks like it should be supported by all modern browsers except for Opera.

I guess the mystery remains unsolved.
Thanks for the tip though!
Definitely a new resource to add to my arsenal :+1:

4

Thanks for pointing out those errors.
I was wondering why the box-shadow wasn’t working.
Oddly enough, changing align-self to end placed the span where I wanted in Firefox, but neither start nor end did anything to the span in Chrome. Weird.

As far as mixing flexbox and grid, I actually had an somewhat different layout based mostly on grid when I first created the page using VS Code and Firefox (my main browser).

Once I put the code into CodePen and opened up Chrome, my first layout looked broken. So I changed stuff here and there, ending up with what you see now.

The two lines of text were originally supposed to be stacked as a column within their own div to the left of the textarea box.

I think I’m going to start developing with Chrome from now on.