NO BUG: Elements displaying incorrectly on iPad and iPhone devices

Bugs
1

I’m experiencing some issues with how some elements are displaying on certain devices with elements created in the Bricks Builder. Does anyone know if this is already a known issue for Bricks?

  1. Search bar animating incorrectly on iPad Pro 11” w/ iPadOS 15.31

This search bar is made as a custom element from Bricks Builder and displays correctly when using dev tools to resize viewport widths, including the tablet breakpoint. However, on a physical iPad the animation and positioning of the elements all display incorrectly.

  1. Grid tiles with “.tile” class not displaying with 1/1 aspect-ratio on iPhone 13 Pro

Again, dev tools (and my android phone) will display all the tiles with 1/1 aspect-ratio but on my coworkers iPhone the first and last tiles seem to lose their 1/1 property. This grid is templated using the Bricks Builder tools.

.tile {
    aspect-ratio: 1/1;
    background-position: center center;
    padding-top: 42px;
    padding-right: 42px;
    padding-bottom: 42px;
    padding-left: 42px;
    justify-content: center;
    overflow: hidden;
}

I want to know if others have experienced similar issues with their sites. Ideally I hoped I was just missing some prefixes for certain browsers but I don’t believe that’s the case. Thanks! :pray:

2

Here is a Js Fiddle of the Search Bar.

3

You’d need to share the URL.

4

Here you go.

5

These aren’t Bricks’ bugs, they’re CSS issues.

  1. The CSS for the animation is wrong. It hasn’t been tested for backward compatibility on older browsers. The linked fiddle is also failing on older iOS versions in the same way. You’d need a different solution if needing compatibility for older IOS. (avoid trying to animate margin if using absolute positioning)
  2. Remove the 42px padding from the divs with the background images with the aspect ratio of 1/1, to solve, this is causing the issue on older iOS.

(Quickest way to test across different browsers and older versions that you need to support is to use tools like lambdatest or browserstack and inspect the page where it’s failing for those browsers)

2 Likes
6

Thanks for these tips. It is more relieving to hear that they aren’t bricks bugs.

I will make these changes. Thanks a bunch.