Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
@sgorneau I'm using meyerweb.com's reset css template, yes. And I checked, it loads in correctly.
-
@theabbie well, I don't see how I can learn anything to resolve this.
Take the iPhone SE's screen dimensions for example.
That would be 320x568px. It has the random invisible magic margin issue.
When I change the dimensions to 319x568px (width - 1px): issue disappears. When I then add the 1px again, the issue stays away. When I reload the page in those dimensions (320x568px) again though, the magic border is there again.
And no there's no JavaScript messing anything up. It's pure HTML5 and CSS3.
What is this crap? -
@LameCode20 Also, a suggestion, The downvote button is for comments which are actually wrong or spam and not the comments you disagree with. Stop downvoting comments, it breaks the policy.
-
@theabbie I didn't even downvote your comment. Calm down. Stop accusing people of things, it's not nice.
-
@LameCode20 oh, I am really sorry then, whoever this is, STOP, looks like another bot has taken over
-
Summoning @kiki, CSS goddess apparent.
-
@junon I think @kiki won’t reply to this lowkey bouba content
-
@example-user That's fair
-
@theabbie so what the "not for me" is supposed to mean?
-
@kiki Well, I found it. Apparently one of the custom plugins installed on the workstations here enables "ShowGrid" in FireFox config while this usually is turned of.
The display got messed up in the "responsive" portion of the developer tools because the grid tried to "squeeze" between the border of my viewport and the content. Turning of that flag fixed the issue.
Testing on a real iPhone now confirms that indeed, it was a FireFox settings thing. There is no random pixel jump when the page is loaded in. -
@dmonkey "not for me" downvote doesn't affect public score, If the score is decreased that means it was downvoted as offensive/spam which is wrong.
-
@theabbie Oh I didn't know
-
@devJs Unfortunately, the exponentially growing scope of web browsing capable devices makes it impossible to test all the browser types and HTML renderers.
The next best thing is a well configured responsive devtool.
Sadly enough, these aren't always as reliable as you'd want them to be. -
The easiest way to deal with it - is just write code that works everywhere / and build things small-screen first - and with the right HTML and CSS ; ) because - it's always doing exactly what you tell it to. It's a computer. Even if you don't know what you did... that's what it will do. So, you'll need to know what you are doing.
-
@sheriffderek sry but that's simply wrong. Maybe if you write assembler code then the computer does exactly what you tell it. But if you write declarative code then you let the computer decide what exactly it has to do. Especially when you have HTML and CSS which have some free room for interpretation on what your declarations mean and how to deal with them.
-
@sheriffderek Did you read the thread? It had nothing to do with my code. Orcourse I write small screen first.
-
@LameCode20 yeah I read it. I guess I mean / don’t use the stupid browser tools. Just resize your screen and use a phone.
-
@Lensflare “works in my brain” and “on my machine.” Surely / CSS is a ‘strong suggestion’ in its declaration. But it’s always doing what the user-agent tells it to - in combination with what you tell it to / for the most part. If you understand those things - then in 2020 - there are no more gotchas.
-
@sheriffderek except when there are.
CSS doesn't have quirks, but the browsers do. And I am unable to test all the browsers engines on all devices / OS'es in the demographic of my employer.
If you do, you have a great advantage over probably most developers out there.
Some browser engines in combination with some devices just do have quirks and tend to interpret things in a different way.
And the 2020 thing is true as long as your employer only targets 2020 browsers, which again, would be an advantage.
My employer wants me to, for instance, support IE 11.
You're just wrong when you state there are no more "gotchas". -
@LameCode20 kind of wonder why there is any grid stuff in there then. Even using plugins or whatever the case may be just causes additional side effects and unneeded headaches.
-
@example-user I think the person that used that workstation before me was using canvas for a background animation, and was using the grid as a guide? I have no clue. I never use it and it gave me headache for about 30 minutes so indeed, it's crap and it sucks.
What only relying on JavaScript for HTML form input validation looks like
Yeah no
Hey, have you ever wanted to punch a developer 8611 times before?
Why is web development such a headache?
I'm writing a responsive wesbite from scratch. All goes perfect, even cross browser.
It all works, adapts to screen size etc. Nice! About to get this code into production.
Me: I'll test the iPhone 5 viewport size before I push the code...
Responsive Developer Tools:
FireFox: nu uh, there's a magic random 1px margin to every element on your page now, which you cannot find in your css or in the computed tab. It's magical.
Me: weird, what if I change the viewport size to the iPhone 6's dimensions?
Issue persists.
Me: hmm, what if I add or substract one fucking pixel from the viewport width or height?
FireFox: What 1px margin? Don't know what you're talking about ... There never was one...
Me: ok, weird (sets viewport size back to the iPhone 5 format for testing)
FireFox: I present to you: the magic random 1px margin.
I'm at a loss. I really am. Been clicking and unclicking almost every responsive part of my css I could find for this page and it just doesn't want to work persistently. And I swear to god that it worked a week ago in that exact viewport size. It's so frustrating.
rant
webdevelopment
responsive design
responsive
css3
html5
webdev
html