Magento 2.4.5 Incorrect Breakpoint

[harrigo]

Preconditions and environment

Magento 2.4.5 - Luma / Blank Themes

https://github.com/magento/magento2/commit/04012ba8e939377c626fb853e75794e093173a68#diff-763edb48523a1fbd76ed756edc437ad0f8adf78f4652dd876852166e9efe5d7c

Any version that came in after I believe Magento 2.4.4.

Steps to reproduce

Load on a browser set to 768px wide or iPad mini. (Smallest Tablet / Desktop)

Expected result

Should be desktop.

Actual result

Loads as mobile.

Additional information

Commit mentioned above moves mobile break points, in older versions the breakpoint for mobile seemed to be 1px lower than currently and changed because of some page builder issue that seems completely unrelated to real break points and completely changing how Magento renders on tablets?

Im testing on a portrait iPad mini which is showing mobile when was previously desktop (Small tablet 768px) i've read dev docs and checked some demos online how they behaved and see what is supposed to be happening...

Dev docs states that "Breakpoints are used in the CSS code to set up the screen width at which the design switches from the mobile to the desktop version." and that the mobile breakpoint in Luma and Blank are 768px "@screen__m: 768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)"

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html

MagePlaza 2.4.5 Demo

This seems to break at 769? so mobile on an iPad Mini at 768px.

https://magento-demo.mageplaza.com/?_gl=1*6n3fs2*_gcl_au*MTAxNjY2NjA5MS4xNjg5MTYwNTYx

MageBit 2.4.? Demo

Breaks at 768 so desktop on an Ipad at 768px.

https://magento2-demo.magebit.com/

Not sure really what the intention is here anymore but feel according to docs the iPad mini (or 768px devices) should be desktop. Have fixed locally to be desktop again at that width but this is incorrect and needs to be sorted. Both the Blank and Luma themes however are mobile at 768px and that commit needs reverting.

Release note

No response

Triage and priority

• [ ] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• [ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• [ ] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• [ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• [X] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant[bot]]

Hi @harrigo. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this

• To learn more about issue processing workflow, refer to the Code Contributions.

  Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[m2-assistant[bot]]

Hi @engcom-Dash. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
     Details

     - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
     - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
     - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[mrtuvn]

you should target <768 as mobile example

media (max-width: 767.98px) {Any devices below <=767.98}

media (min-width: 768px) {Any devices above and equal >=768}

[mrtuvn]

seem from 2.4.5 core base changed a little bit here

https://github.com/magento/magento2/commit/04012ba8e939377c626fb853e75794e093173a68#diff-763edb48523a1fbd76ed756edc437ad0f8adf78f4652dd876852166e9efe5d7c

i don't know exactly context of this new update

seem core check device from above 769

[mrtuvn]

@magento give me 2.4.5 instance

[magento-deployment-service[bot]]

Hi @mrtuvn. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @mrtuvn, unfortunately there is no ability to deploy Magento instance at the moment. Please try again later.

[harrigo]

seem from 2.4.5 core base changed a little bit here

04012ba#diff-763edb48523a1fbd76ed756edc437ad0f8adf78f4652dd876852166e9efe5d7c

i don't know exactly context of this new update

seem core check device from above 769

Yea i've just been made aware of that commit, not sure if this was intentional does seem a little strange. In fact completely wrong, i've reverted that locally.

[harrigo]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @harrigo. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @harrigo, here is your Magento Instance: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering Admin access: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering/admin_776b Login: ac5c10aa Password: 7f4900611028

[mrtuvn]

i don't have time for dig more in this but seem styles between media queries seem not work as expect anymore

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
// Styles in here not to build to final output
}

but add code styles here still work => super weird

i'm pretty shocked how happen this commit from 2 years ago merged to current upstream code

[engcom-Dash]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @engcom-Dash, here is your Magento Instance: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering Admin access: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering/admin_9162 Login: 872d765a Password: a6807a80e299

[engcom-Hotel]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @engcom-Hotel. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @engcom-Hotel, here is your Magento Instance: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering Admin access: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering/admin_3cdc Login: bc3c9e86 Password: d69c9bd73708

[engcom-Dash]

Hi @harrigo,

Thanks for reporting and collaboration. In iPad mini, the browser is set to 768px and loads as in desktop, it seems to working as expected.

please refer to the attached video evidence.

https://github.com/magento/magento2/assets/60198592/f3508513-8e96-47c7-a023-2efc86590d9d

Let us know if we have missed anything.

Thanks

[harrigo]

Thanks for the update In the video evidence it loads all the menu and header as mobile however?

On Mon, 25 Sept 2023, 14:32 susena sravani simhambhatla, < @.***> wrote:

Hi @harrigo https://github.com/harrigo Thanks for reporting and collaboration. In ipadmini the browser is set to 768px and loads as in desktop. working as expected. issue not reproducible. please refer the attached video evidence.

https://github.com/magento/magento2/assets/60198592/f3508513-8e96-47c7-a023-2efc86590d9d

— Reply to this email directly, view it on GitHub https://github.com/magento/magento2/issues/37753#issuecomment-1733721424, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG2INP34AE7YTNUZRJLIIB3X4GBXBANCNFSM6AAAAAA2HMMZGY . You are receiving this because you were mentioned.Message ID: @.***>

[engcom-Dash]

@magento give me 2.4-develop instance

[engcom-Bravo]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @engcom-Bravo. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @engcom-Bravo, here is your Magento Instance: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering Admin access: https://dc80655f5360dd7682c77147db29cbeb.instances-prod.magento-community.engineering/admin_3a1f Login: d200a732 Password: e51ec3b64b24

[engcom-Dash]

Hi @harrigo Thank you for reporting and collaboration. Verified the issue on Magento 2.4-develop instance and the issue is reproducible. In ipad mini the menu and header loads as mobile, instead they should load as desktop. Confirming the issue. Please refer the video recording.

https://github.com/magento/magento2/assets/60198592/2d64c330-6b47-479b-9c63-0aa6439190b1

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-9606 is successfully created for this GitHub issue.

[m2-assistant[bot]]

:white_check_mark: Confirmed by @engcom-Dash. Thank you for verifying the issue.
Issue Available: @engcom-Dash, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

[amcguireweb]

So glad all of our sites now have a one pixel discrepancy, what a mess. Why???

[amcguireweb]

I received a patch for this a couple of days ago from Adobe support. Only took 2 months to get.

ACSD-58442_2.4.6-p3.patch