5 ms·

Have you tried this in a mobile browser? I’m seeing the headline cut off because the page ends up being wider than my viewport because of the position of the la

by baliex 2y ago

Have you tried this in a mobile browser? I’m seeing the headline cut off because the page ends up being wider than my viewport because of the position of the later carousel elements. It otherwise looks great but the side scrolling is too much of a compromise for me. I’m using Safari on iPhone.

retrac98 2y ago
Over a decade on from “mobile first” I’m always surprised at how few developers actually test their work on mobile devices.
- Kiro 2y ago
  The issues differ wildly between Android and iOS and often a fix for one device, OS and browser breaks something in another. It's not easy. Also, not everyone has access to an iPhone or a Mac with a simulator, and even the simulator has its own irregularities with how things are behaving that are not consistent with an actual device.
- chrismorgan 2y ago
  It’s fairly common for these sorts of things to be iPhone-specific, and you can’t test on Apple devices without owning one, or paying altogether too much. I’ve found Epiphany (a.k.a. GNU Web), which is based on WebKit, to be decent proxy for testing on Safari—in my last project of this sort, where I was developing on Firefox and could check in Chromium, I was able to reproduce each of the three or four Safari issues that were raised, in Epiphany.
  - iainmerrick 2y ago
    It’s fairly common for these sorts of things to be iPhone-specific Having done a bunch of mobile web work recently, I don't think that's actually true -- I hit weird issues on both Safari (on iOS) and Chrome (on Android). (And Firefox for that matter) Safari does have its weird glitches but it's not inherently glitchier than other browsers. There are some APIs it doesn't implement, but you don't need real hardware to catch that, MDN / caniuse has all the compatibility data and there are tools like ts-browser-compat for automated checks. you can’t test on Apple devices without owning one, or paying altogether too much Right, that's the real problem. But again I don't think it's Apple-specific. If you're a Mac user, in principle you could install Android Studio and test your app there, but a) that's a huge hassle, and b) an emulated phone on a desktop isn't close enough to a real phone to be useful for QA. You really need to test on both iOS and Android hardware, there's no two ways about it. I guess it would be good if you could install Safari on Android, and/or real Chrome on iOS. Then you'd only need to buy one phone. And that is on Apple, as they're the one blocking it in each case.
  - knallfrosch 2y ago
    > It’s fairly common for these sorts of things to be iPhone-specific, and you can’t test on Apple devices without owning one, or paying altogether too much. That's correct, but Apple phone users are customers with money used to paying.
  - nicoburns 2y ago
    > You can’t test on Apple devices without owning one, or paying altogether too much. Yep! And it sucks, but this is the #1 reason why most web developers are using macs. If you want to test across all major platforms, it's the only way to do it from one machine (testing windows on a mac is a bit iffy on Apple Silicon macs, but it can be done).
    - worble 2y ago
      >but this is the #1 reason why most web developers are using macs Have you got a link to that? I'd be interested in seeing the stats and breakdown.
      - nicoburns 2y ago
        I don't have any stats, but this has been my professional experience in the UK. It's entirely possible that this doesn't hold up worldwide, or outside of specialist web development agencies.
- rpastuszak 2y ago
  Which is a shame because one of the upsides of building mobile-first is that you generally end up with simpler/easier to reason about results. (not a comment on this site implementation per se, but a general remark)
Hasu 2y ago
It works fine on both Chrome and Firefox on my Android (Pixel 8). Maybe the developer doesn't have an iPhone?
written-beyond 2y ago
Same with Brave on android, text is breaking out and overflowing beyond the vp
baliex 2y ago
It's the same with a sufficiently narrow browser window on my laptop. Firefox: https://i.ibb.co/NW69hK2/carousel.png https://i.ibb.co/NW69hK2/carousel.png
- deleted 2y ago
  [deleted]
balmy_tommy 2y ago
thank you for pointing out. it turns out that a `overflow: hidden` was missing. should be ok now.
Lorin 2y ago
I did this back in 2018 with full mobile support and nice edge fading: https://codepen.io/Lorin/pen/OEJGrM https://codepen.io/Lorin/pen/OEJGrM

by baliex 2y ago

retrac98 2y ago

Over a decade on from “mobile first” I’m always surprised at how few developers actually test their work on mobile devices.

Kiro 2y ago
The issues differ wildly between Android and iOS and often a fix for one device, OS and browser breaks something in another. It's not easy. Also, not everyone has access to an iPhone or a Mac with a simulator, and even the simulator has its own irregularities with how things are behaving that are not consistent with an actual device.
chrismorgan 2y ago
It’s fairly common for these sorts of things to be iPhone-specific, and you can’t test on Apple devices without owning one, or paying altogether too much. I’ve found Epiphany (a.k.a. GNU Web), which is based on WebKit, to be decent proxy for testing on Safari—in my last project of this sort, where I was developing on Firefox and could check in Chromium, I was able to reproduce each of the three or four Safari issues that were raised, in Epiphany.
- iainmerrick 2y ago
  It’s fairly common for these sorts of things to be iPhone-specific Having done a bunch of mobile web work recently, I don't think that's actually true -- I hit weird issues on both Safari (on iOS) and Chrome (on Android). (And Firefox for that matter) Safari does have its weird glitches but it's not inherently glitchier than other browsers. There are some APIs it doesn't implement, but you don't need real hardware to catch that, MDN / caniuse has all the compatibility data and there are tools like ts-browser-compat for automated checks. you can’t test on Apple devices without owning one, or paying altogether too much Right, that's the real problem. But again I don't think it's Apple-specific. If you're a Mac user, in principle you could install Android Studio and test your app there, but a) that's a huge hassle, and b) an emulated phone on a desktop isn't close enough to a real phone to be useful for QA. You really need to test on both iOS and Android hardware, there's no two ways about it. I guess it would be good if you could install Safari on Android, and/or real Chrome on iOS. Then you'd only need to buy one phone. And that is on Apple, as they're the one blocking it in each case.
- knallfrosch 2y ago
  > It’s fairly common for these sorts of things to be iPhone-specific, and you can’t test on Apple devices without owning one, or paying altogether too much. That's correct, but Apple phone users are customers with money used to paying.
- nicoburns 2y ago
  > You can’t test on Apple devices without owning one, or paying altogether too much. Yep! And it sucks, but this is the #1 reason why most web developers are using macs. If you want to test across all major platforms, it's the only way to do it from one machine (testing windows on a mac is a bit iffy on Apple Silicon macs, but it can be done).
  - worble 2y ago
    >but this is the #1 reason why most web developers are using macs Have you got a link to that? I'd be interested in seeing the stats and breakdown.
    - nicoburns 2y ago
      I don't have any stats, but this has been my professional experience in the UK. It's entirely possible that this doesn't hold up worldwide, or outside of specialist web development agencies.
rpastuszak 2y ago
Which is a shame because one of the upsides of building mobile-first is that you generally end up with simpler/easier to reason about results. (not a comment on this site implementation per se, but a general remark)

Hasu 2y ago

It works fine on both Chrome and Firefox on my Android (Pixel 8). Maybe the developer doesn't have an iPhone?

written-beyond 2y ago

Same with Brave on android, text is breaking out and overflowing beyond the vp

baliex 2y ago

It's the same with a sufficiently narrow browser window on my laptop. Firefox: https://i.ibb.co/NW69hK2/carousel.png https://i.ibb.co/NW69hK2/carousel.png

deleted 2y ago
[deleted]

balmy_tommy 2y ago

thank you for pointing out. it turns out that a `overflow: hidden` was missing. should be ok now.

Lorin 2y ago

I did this back in 2018 with full mobile support and nice edge fading: https://codepen.io/Lorin/pen/OEJGrM https://codepen.io/Lorin/pen/OEJGrM