为什么这些 `select` 元素没有被渲染？

Question

I'm working on a project for a client where there needs to be 125 dropdown menus displayed on one page. I of course am not going to manually add all those so I wrote a simple for expression to do it for me. This works for the vast majority of the dropdown menus (which are just select tags), but some do not show up at all. And it is the same three each and every time. Why are these same three never being rendered? When looking in the Elements view in Chrome Dev Tools, it shows the dropdowns as being in the DOM, but they are not shown. I've looked at this code over and over and I cannot see anything wrong with it and need a second pair of eyes? What's going on here? ( NOTE: db/get-all-advertisers never returns nil ) Here is the code and a picture of what I'm talking about:

EDIT: Turns out this is some absolutely bizarre bug with the browsers or graphics or something on all of my Ubuntu machines. Was not able to replicate the bug on my friend's Mac. Everything worked fine.

(def new-issue-html
  (hiccup/html
   [:html
    [:head
     [:title "Add an Issue"]
     [:meta {:name "viewport" :content "width=device-width, initial-scale=1.0"}]
     [:link {:rel "stylesheet" :href "css/bootstrap.min.css"}]
     [:link {:rel "stylesheet" :href "css/extra.css"}]
     [:script {:src "js/field-verify.js"}]]
    (let [advertisers (db/get-all-advertisers)]
        [:body
         [:div {:class "container-fluid center"}
          [:h1 "Add an Issue"]
          (conj
           [:form {:method "post" :name "newIssueForm" :action "/new-issue"}
            [:div
             [:label {:for "issue-date"} "Issue Time Period (i.e. \"July/August 2020\"): "]]
            [:div
             [:input {:id "issue-date" :name "issue-date" :style "margin-bottom: 10px;"}]]]
           (for [num (range 1 (inc NUM_OF_ADVERTISERS_PER_ISSUE))
                 :let [ad-slot [:div
                                [:label {:style "margin-right: 10px;" :for (str "ad-slot-" num)} (str num ": ")]
                                (conj
                                 [:select {:id (str "ad-slot-" num) :name (str "ad-slot-" num)}]
                                 (for [advertiser advertisers
                                       :let [option [:option {:value (:advertisers/advertiser_id advertiser)}
                                                     (:advertisers/advertiser_name advertiser)]]]
                                   option))]]]
             ad-slot)
           (anti-forgery-field)
           [:div {:style "margin-top: 10px;"}
            (hf/submit-button {:id "submit" :onclick "return checkForm()"} "Create Issue")])]])]))

Answer 1

You can wrap the for s in a doall to force realization of the lazy sequence

/edit:

It is possibly because of a Chromium bug related to GPU hardware acceleration and double monitors. . Many people experience a "Linux-only: Empty SELECT dropdown".

The bug thread states it is related to double monitors. A solution is to make the right monitor smaller than the left:

Another (not successful for everyone) solution is according to this answer to disable hardware acceleration:

The summary is that you need to go to 'settings' then 'advanced settings' in Chrome, then uncheck the hardware acceleration box.